<!-- 开发测试人员使用 -->
<script setup lang="ts">
import {
  testJson,
  testGet,
  testPost,
  testDelete,
  testRestfulGet
} from "@/api/test";

import { ElNotification } from "element-plus";
import { message } from "@/utils/message";
defineOptions({
  name: "Test"
});
const parameter = { key: "8888", password: "123456" };
const style = { marginTop: "12px" };
const text = [
  {
    info: "测试发送Json请求参数",
    method: "callJson"
  },
  {
    info: "测试发送Get请求参数",
    method: "callGet"
  },
  {
    info: "测试发送Post请求参数",
    method: "callPost"
  },
  {
    info: "测试发送Delete请求参数",
    method: "callDelete"
  },
  {
    info: "测试发送restful风格查询",
    method: "callRestfulGet"
  }
];

// 调用通知框

const callElNotification = (data: any) => {
  if (data.code == 200) {
    ElNotification({
      title: "success",
      message: data,
      type: "success",
      duration: 6000 // 持续时间  6s
    });
  } else {
    ElNotification({
      title: "error",
      message: data,
      type: "error",
      duration: 6000
    });
  }
};

/* 测试方法区域 */
// 默认发送都是js请求
function callJson() {
  testJson(parameter).then(data => {
    if (data) {
      message(data, { type: "success" });
    }
  });
}

function callGet() {
  testGet(parameter).then(data => {
    if (data) {
      callElNotification(data);
    }
  });
}

function callPost() {
  testPost(parameter).then(data => {
    if (data) {
      callElNotification(data);
    }
  });
}
function callDelete() {
  testDelete(parameter).then(data => {
    if (data) {
      callElNotification(data);
    }
  });
}

function callRestfulGet() {
  testRestfulGet().then(data => {
    if (data) {
      callElNotification(data);
    }
  });
}

function clickBtn(method: string) {
  switch (method) {
    case "callJson":
      callJson();
      break;
    case "callGet":
      callGet();
      break;
    case "callPost":
      callPost();
      break;
    case "callDelete":
      callDelete();
      break;
    case "callRestfulGet":
      callRestfulGet();
      break;

    default:
      break;
  }
}
</script>

<template>
  <div>
    <el-card class="box-card m-4" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="font-medium">测试后端请求</span>
        </div>
      </template>
      <template v-for="(item, v) in text" :key="v">
        <el-button @click="clickBtn(item.method)" :style="style">{{
          item.info
        }}</el-button>
      </template>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.main-content {
  margin: 0 !important;
}
</style>
